<template>
	<div class="page-header-index-wide">
		<a-row :gutter="24">
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<chart-card :loading="loading" title="用户数量" :total="userData.userCount || 0">
					<template slot="footer">
						<trend style="margin-right: 16px;">
							<span slot="term">宝妈总量:</span>
							{{userData.mamiCount || 0}}
						</trend>
						<trend>
							<span slot="term">月嫂总量:</span>
							{{userData.nannyCount || 0}}
						</trend>
					</template>
				</chart-card>
			</a-col>
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<chart-card :loading="loading" title="访问记录" :total="8846">
					<template slot="footer">
						<trend style="margin-right: 16px;">
							<span slot="term">当日访问记录:</span>
							{{userData.mamiCount || 0}}
						</trend>
					</template>
				</chart-card>
			</a-col>
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<chart-card :loading="loading" title="需求简历数据" :total="78">
					<template slot="footer">
						<trend style="margin-right: 16px;">
							<span slot="term">当日需求简历量:</span>
							{{userData.mamiCount || 0}}
						</trend>
					</template>
				</chart-card>
			</a-col>
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<chart-card :loading="loading" title="订单数据" :total="6560">
					<template slot="footer">
						<trend style="margin-right: 16px;">
							<span slot="term">当日订单量:</span>
							{{userData.mamiCount || 0}}
						</trend>
					</template>
				</chart-card>
			</a-col>
		</a-row>

		<!-- <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{width: '256px'}" />
          </div>
          <a-tab-pane loading="true" tab="用户数量" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="销售额排行" :dataSource="barData"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="销售趋势" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="销售额趋势" :dataSource="barData"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card> -->
		<a-row :gutter="24">
			<a-col :span="12">
				<a-card :loading="loading" :bordered="false" title="新增用户统计">
					<div id="userMain" v-if="userList.length > 0"  style="width: 100%; height: 240px"></div>
					<a-empty v-if="userList.length == 0" />
				</a-card>
			</a-col>
			<a-col :span="12">
				<a-card :loading="loading" :bordered="false" title="新增访问记录统计">
					<div id="accessMain" v-if="accessList.length > 0" style="width: 100%; height: 240px"></div>
					<a-empty v-if="accessList.length == 0" />
				</a-card>
			</a-col>
		</a-row>
		
		<a-row :gutter="24">
			<a-col :span="12">
				<a-card :loading="loading" :bordered="false" title="新增需求简历统计" :style="{ marginTop: '24px' }">
					<div id="dataMain" v-if="dataList.length > 0" style="width: 100%; height: 240px"></div>
					<a-empty v-if="dataList.length == 0" />
				</a-card>
			</a-col>
			<a-col :span="12">
				<a-card :loading="loading" :bordered="false" title="面试统计" :style="{ marginTop: '24px' }">
					<div id="dataMain" v-if="dataList.length > 0" style="width: 100%; height: 240px"></div>
					<a-empty v-if="dataList.length == 0" />
				</a-card>
			</a-col>
		</a-row>
		
		<a-row :gutter="24">
			<a-col :span="12">
				<a-card :loading="loading" :bordered="false" title="订单数据统计" :style="{ marginTop: '24px' }">
					<div v-if="orderList.length > 0" id="orderMain" style="width: 100%; height: 240px"></div>
					<a-empty v-if="orderList.length == 0" />
				</a-card>
			</a-col>
			<a-col :span="12">
				<a-card :loading="loading" :bordered="false" title="每日分享数据统计" :style="{ marginTop: '24px' }">
					<div v-if="orderList.length > 0" id="orderMain" style="width: 100%; height: 240px"></div>
					<a-empty v-if="orderList.length == 0" />
				</a-card>
			</a-col>
		</a-row>
		
		<a-row :gutter="24">
			<a-col :span="8">
				<a-card :loading="loading" :bordered="false" title="订单数据统计" :style="{ marginTop: '24px' }">
					<div v-if="propagateList.length > 0" id="propagateMain" style="width: 100%; height: 240px"></div>
					<a-empty v-if="propagateList.length == 0" />
				</a-card>
			</a-col>
			<a-col :span="16">
				<a-card :loading="loading" :bordered="false" title="订单数据统计" :style="{ marginTop: '24px' }">
					<div v-if="propagateList.length > 0" id="propagateMain" style="width: 100%; height: 240px"></div>
					<a-empty v-if="propagateList.length == 0" />
				</a-card>
			</a-col>
		</a-row>	
	</div>
</template>

<script>
	import ChartCard from '@/components/ChartCard'
	import ACol from "ant-design-vue/es/grid/Col"
	import Trend from '@/components/Trend'
	import {
		getUserData,
		statisticsUserList,
		statisticsAccessList,
		statisticsDataList,
		statisticsOrderList,
		statisticsPropagateList,
	} from '@/api/manage.js'
	export default {
		name: "IndexChart",
		components: {
			ACol,
			ChartCard,
			Trend
		},
		data() {
			return {
				userList: [],
				userData: {
					userCount: 0
				},
				loading: true,
				myChart: null,
				myChart1: null,
				myChart2: null,
				myChart3: null,
				myChart4: null,
				orderList: [],
				propagateList: [],
				dataList: [],
				accessList: []
			}
		},
		mounted() {
			statisticsUserList().then(res => {
				let data = res.result.records
				setTimeout(() => {
					this.userList  = data
					this.userEcharts(data)
				}, 200)
			})
			statisticsAccessList().then(res => {
				let data = res.result.records
				setTimeout(() => {
					this.accessList  = data
					this.accessEcharts(data)
				}, 200)
			})
			statisticsDataList().then(res => {
				let data = res.result.records
				setTimeout(() => {
					this.dataList  = data
					this.dataEcharts(data)
				}, 200)
			})
			statisticsOrderList().then(res => {
				let data = res.result.records
				setTimeout(() => {
					this.orderList = data
					if(data && data.length > 0) {
						this.orderEcharts(data)
					}
				}, 200)
			})
			statisticsPropagateList().then(res => {
				let data = res.result.records
				setTimeout(() => {
					this.propagateList = data
					if(data && data.length > 0) {
						this.propagateEcharts(data)
					}
				}, 200)
			})
			
			window.addEventListener('resize', this.resizeEcharts)
		},
		created() {
			setTimeout(() => {
				this.loading = !this.loading
			}, 100)
			getUserData().then(res => {
				if (res.code == 200) {
					this.userData = res.result
				}
			})
			//this.initLogInfo();
		},
		methods: {
			resizeEcharts() {
				setTimeout(() => {
					this.myChart && this.myChart.resize()
					this.myChart1 && this.myChart1.resize()
					this.myChart2 && this.myChart2.resize()
					this.myChart3 && this.myChart3.resize()
					this.myChart4 && this.myChart4.resize()
				}, 100)
			},
			propagateEcharts(data) {
				this.myChart4 = this.$echarts.init(document.getElementById('propagateMain'))
				let xAxisData = []
				let interviewData = []
				let orderEndData = []
				let resumeAddData = []
				let demandAddData = []
				let orderAddData = []
				data.map((item, index) => {
					xAxisData.push(item.createDate)
					interviewData.push(item.interviewSuccess)
					orderEndData.push(item.orderEnd)
					resumeAddData.push(item.resumeAdd)
					demandAddData.push(item.demandAdd)
					orderAddData.push(item.orderAdd)
				})
				var emphasisStyle = {
					itemStyle: {
						shadowBlur: 10,
						shadowColor: 'rgba(0,0,0,0.3)',
					},
				}
				let option = {
						legend: {
							data: ['面试成功数', '订单完成数', '简历新增数','需求新增数','订单新增数'],
							left: '10',
						},
						toolbox: {
							feature: {},
						},
						tooltip: {},
						xAxis: {
							data: xAxisData,
							axisLine: {
								onZero: true
							},
							splitLine: {
								show: false
							},
							splitArea: {
								show: false
							},
						},
						yAxis: {},
						grid: {
							bottom: 30,
							left: 0,
							right:10
						},
						series: [{
								name: '面试成功数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: interviewData,
							},
							{
								name: '订单完成数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: orderEndData,
							},
							{
								name: '简历新增数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: resumeAddData,
							},
							{
								name: '需求新增数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: demandAddData,
							},
							{
								name: '订单新增数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: orderAddData,
							},
						]
				}
				this.myChart4.setOption(option)
			},
			orderEcharts(data) {
				this.myChart3 = this.$echarts.init(document.getElementById('orderMain'))
				let xAxisData = []
				let interviewData = []
				let orderEndData = []
				let resumeAddData = []
				let demandAddData = []
				let orderAddData = []
				data.map((item, index) => {
					xAxisData.push(item.createDate)
					interviewData.push(item.interviewSuccess)
					orderEndData.push(item.orderEnd)
					resumeAddData.push(item.resumeAdd)
					demandAddData.push(item.demandAdd)
					orderAddData.push(item.orderAdd)
				})
				var emphasisStyle = {
					itemStyle: {
						shadowBlur: 10,
						shadowColor: 'rgba(0,0,0,0.3)',
					},
				}
				let option = {
						legend: {
							data: ['面试成功数', '订单完成数', '简历新增数','需求新增数','订单新增数'],
							left: '10',
						},
						toolbox: {
							feature: {},
						},
						tooltip: {},
						xAxis: {
							data: xAxisData,
							axisLine: {
								onZero: true
							},
							splitLine: {
								show: false
							},
							splitArea: {
								show: false
							},
						},
						yAxis: {},
						grid: {
							bottom: 30,
							left: 0,
							right:10
						},
						series: [{
								name: '面试成功数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: interviewData,
							},
							{
								name: '订单完成数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: orderEndData,
							},
							{
								name: '简历新增数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: resumeAddData,
							},
							{
								name: '需求新增数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: demandAddData,
							},
							{
								name: '订单新增数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: orderAddData,
							},
						]
				}
				this.myChart3.setOption(option)
			},
			dataEcharts(data) {
				this.myChart2 = this.$echarts.init(document.getElementById('dataMain'))
				let xAxisData = []
				let interviewData = []
				let orderEndData = []
				let resumeAddData = []
				let demandAddData = []
				let orderAddData = []
				data.map((item, index) => {
					xAxisData.push(item.createDate)
					interviewData.push(item.interviewSuccess)
					orderEndData.push(item.orderEnd)
					resumeAddData.push(item.resumeAdd)
					demandAddData.push(item.demandAdd)
					orderAddData.push(item.orderAdd)
				})
				var emphasisStyle = {
					itemStyle: {
						shadowBlur: 10,
						shadowColor: 'rgba(0,0,0,0.3)',
					},
				}
				let option = {
						legend: {
							data: ['面试成功数', '订单完成数', '简历新增数','需求新增数','订单新增数'],
							left: '10',
						},
						toolbox: {
							feature: {},
						},
						tooltip: {},
						xAxis: {
							data: xAxisData,
							axisLine: {
								onZero: true
							},
							splitLine: {
								show: false
							},
							splitArea: {
								show: false
							},
						},
						yAxis: {},
						grid: {
							bottom: 30,
							left: 0,
							right:10
						},
						series: [{
								name: '面试成功数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: interviewData,
							},
							{
								name: '订单完成数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: orderEndData,
							},
							{
								name: '简历新增数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: resumeAddData,
							},
							{
								name: '需求新增数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: demandAddData,
							},
							{
								name: '订单新增数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: orderAddData,
							},
						]
				}
				this.myChart2.setOption(option)
			},
			accessEcharts(data) {
				this.myChart1 = this.$echarts.init(document.getElementById('accessMain'))
				let xAxisData = []
				let demandData = []
				let resumeData = []
				let accessData = []
				data.map((item, index) => {
					xAxisData.push(item.createDate)
					demandData.push(item.demandAccessDaily)
					resumeData.push(item.resumeAccessDaily)
					accessData.push(item.accessCountDaily)
				})
				var emphasisStyle = {
					itemStyle: {
						shadowBlur: 10,
						shadowColor: 'rgba(0,0,0,0.3)',
					},
				}
				let option = {
						legend: {
							data: ['访问记录总数', '简历访问记录', '需求访问记录'],
							left: '10',
						},
						toolbox: {
							feature: {},
						},
						tooltip: {},
						xAxis: {
							data: xAxisData,
							axisLine: {
								onZero: true
							},
							splitLine: {
								show: false
							},
							splitArea: {
								show: false
							},
						},
						yAxis: {},
						grid: {
							bottom: 30,
							left: 0,
							right:10
						},
						series: [{
								name: '访问记录总数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: accessData,
							},
							{
								name: '简历访问记录',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: resumeData,
							},
							{
								name: '需求访问记录',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: demandData,
							},
						]
				}
				this.myChart1.setOption(option)
			},
			userEcharts(data) {
				this.myChart = this.$echarts.init(document.getElementById('userMain'))
				let xAxisData = []
				let mamiData = []
				let userData = []
				let nannyData = []
				data.map((item, index) => {
					xAxisData.push(item.createDate)
					mamiData.push(item.mamiAddDaily)
					userData.push(item.userAddDaily)
					nannyData.push(item.nannyAddDaily)
				})
				var emphasisStyle = {
					itemStyle: {
						shadowBlur: 10,
						shadowColor: 'rgba(0,0,0,0.3)',
					},
				}
				let option = {
						legend: {
							data: ['用户总数', '宝妈总数', '月嫂总数'],
							left: '10',
						},
						toolbox: {
							feature: {},
						},
						tooltip: {},
						xAxis: {
							data: xAxisData,
							axisLine: {
								onZero: true
							},
							splitLine: {
								show: false
							},
							splitArea: {
								show: false
							},
						},
						yAxis: {},
						grid: {
							bottom: 30,
							left: 10,
							right:10
						},
						series: [{
								name: '用户总数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: userData,
							},
							{
								name: '宝妈总数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: mamiData,
							},
							{
								name: '月嫂总数',
								type: 'bar',
								barWidth: '30%',
								emphasis: emphasisStyle,
								data: nannyData,
							},
						]
				}
				this.myChart.setOption(option)
			},
			// initLogInfo() {
			// 	getLoginfo(null).then((res) => {
			// 		if (res.success) {
			// 			Object.keys(res.result).forEach(key => {
			// 				res.result[key] = res.result[key] + ""
			// 			})
			// 			this.loginfo = res.result;
			// 		}
			// 	})
			// 	getVisitInfo().then(res => {
			// 		if (res.success) {
			// 			this.visitInfo = res.result;
			// 		}
			// 	})
			// },
		}
	}
</script>

<style lang="less" scoped>
	.circle-cust {
		position: relative;
		top: 28px;
		left: -100%;
	}

	.extra-wrapper {
		line-height: 55px;
		padding-right: 24px;

		.extra-item {
			display: inline-block;
			margin-right: 24px;

			a {
				margin-left: 24px;
			}
		}
	}

	/* 首页访问量统计 */
	.head-info {
		position: relative;
		text-align: left;
		padding: 0 32px 0 0;
		min-width: 125px;

		&.center {
			text-align: center;
			padding: 0 32px;
		}

		span {
			color: rgba(0, 0, 0, .45);
			display: inline-block;
			font-size: .95rem;
			line-height: 42px;
			margin-bottom: 4px;
		}

		p {
			line-height: 42px;
			margin: 0;

			a {
				font-weight: 600;
				font-size: 1rem;
			}
		}
	}
</style>